<!--
 * @Author: sundl
 * @Date: 2021-04-14 11:29:55
 * @project: 天津YQ平台
 * @desc: 此文件作用：外部来文详情签收反馈子模块下签收反馈信息
-->
<template>
    <dg-row type="flex" justify="space-between" class="wrap">
        <dg-col :width="'2rem'" class="wrap-icon">
            <template v-if="signState == '已签收'">
                <i class="el-icon-success success-icon" />
            </template>
            <template v-else>
                <i class="el-icon-warning warning-icon" />
            </template>
        </dg-col>
        <dg-col class="wrap-info">
            <dg-row type="flex" :gutter="2" align="middle" justify="space-between">
                <div>
                    <span class="wrap-info__dept">{{ signDept }}</span>
                    <dg-tag effect="dark" :type="signState | formatStateType">{{ signState }}</dg-tag>
                    <dg-tag effect="dark" :type="feedbackState | formatStateType">{{ feedbackState }}</dg-tag>
                </div>
                <div class="wrap-info__sign">
                    <template v-if="signState !== ''">
                        <span>签收人：{{ signPerson }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>签收时间：{{ signDate }}</span>
                    </template>
                    <template v-if="feedbackState !== '未反馈'">
                        <el-divider direction="vertical"></el-divider>
                        <span>反馈人：{{ feedbackPerson }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span style="color: #f56c6c">反馈时间：{{ feedbackDate }}</span>
                    </template>
                </div>
            </dg-row>
            <div class="wrap-info__bottom">
                <template v-if="feedbackState == '未反馈'">暂无反馈</template>
                <template v-else>
                    <dg-row class="wrap-info__bottom--content">{{ feedbackContent }}</dg-row>
                    <dg-row type="flex">
                        <dg-col :span="2" v-for="(item, index) in feedbackEnclosure" :key="index">
                            <Enclosure />
                        </dg-col>
                    </dg-row>
                </template>
            </div>
        </dg-col>
    </dg-row>
</template>

<script>
import Enclosure from "@/components/layout/enclosure";

export default {
    components: {
        Enclosure
    },
    props: {
        // 外部传入数据源
        dataSource: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    filters: {
        formatStateType(val) {
            let type = "";
            switch (val) {
                case "已签收":
                    type = "success";
                    break;
                case "未签收":
                    type = "danger";
                    break;
                case "已反馈":
                    type = "success";
                    break;
                case "未反馈":
                    type = "warning";
                    break;
                case "超时反馈":
                    type = "warning";
                    break;
                default:
                    type = "plain";
                    break;
            }
            return type;
        }
    },
    computed: {
        // 签收信息
        signDept() {
            // 签收单位
            return this.dataSource.signDept || "";
        },
        signPerson() {
            // 签收人
            return this.dataSource.signPerson || "";
        },
        signDate() {
            // 签收时间
            return this.dataSource.signDate || "";
        },
        signState() {
            // 签收状态
            return this.dataSource.signState || "";
        },
        // 反馈信息
        feedbackDept() {
            // 反馈单位
            return this.dataSource.feedbackDept || "";
        },
        feedbackPerson() {
            // 反馈人
            return this.dataSource.feedbackPerson || "";
        },
        feedbackDate() {
            // 反馈事假
            return this.dataSource.feedbackDate || "";
        },
        feedbackState() {
            // 反馈状态
            return this.dataSource.feedbackState || "";
        },
        feedbackContent() {
            // 反馈内容
            return this.dataSource.feedbackContent || "";
        },
        feedbackEnclosure() {
            // 反馈附件
            return this.dataSource.feedbackEnclosure || "";
        }
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    position: relative;
    margin-bottom: 1rem;
    border: none !important;
    &:not(:last-child)::after {
        position: absolute;
        top: 1rem;
        left: 11px;
        z-index: 1;
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.15);
    }

    .success-icon {
        color: #67c23a;
        position: relative;
        z-index: 9;
        top: -7px;
        background-color: #fff;
    }
    .warning-icon {
        color: #f56c6c;
        position: relative;
        z-index: 9;
        top: -7px;
        background-color: #fff;
    }
    &-icon {
        font-size: 1.5rem;
    }
    &-info {
        padding: 0.8rem 1.5rem;
        // width: 80.94rem;
        min-height: 4.75rem;
        border-radius: 0.13rem;
        border: solid 0.06rem rgba(0, 0, 0, 0.15);
        &__dept {
            margin-right: 25px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0px;
            color: rgba(0, 0, 0, 1);
            opacity: 0.85;
        }
        &__sign {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 36px;
            letter-spacing: 0px;
            color: rgba(0, 0, 0, 0.45);
        }
        &__bottom {
            margin-top: 0.5rem;
            font-family: MicrosoftYaHei;
            font-size: 0.88rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: rgba(0, 0, 0, 0.45);
            &--content {
                margin-bottom: 1rem;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 24px;
                letter-spacing: 0px;
                color: rgba(0, 0, 0, 1);
                opacity: 0.85;
            }
        }
    }
}
</style>
